<template>
  <div style="display: inline-block">
    <a-popover
      overlayClassName="pop-cascader"
      placement="bottomLeft"
      trigger="click"
      :visible="clicked"
      @visibleChange="handleClickChange"
    >
      <template slot="content">
        <cascader-panel></cascader-panel>
      </template>
      <a-input
        ref="reference"
        v-model="selectedLabel"
        type="text"
        read-only
        :placeholder="palaceholder"
        size="large"
        class="common-input"
        :class="{ 'is-focus': visible }"
      >
        <template slot="suffix">
          <a-icon v-if="!showClose" type="down" />
          <a-icon v-if="showClose" type="up" />
        </template>
      </a-input>
    </a-popover>
  </div>
</template>
<script>
import CascaderPanel from "@/components/cascader/CascaderPanel";
export default {
  components: {
    CascaderPanel,
  },
  props: {
    palaceholder: {
      type: String,
      default: "请选择",
    },
  },
  data() {
    return {
      visible: false,
      clicked: false,
      showClose: false,
      selectedLabel: "",
    };
  },
  methods: {
    // 点击input弹出popover
    handleClickChange(visible) {
      this.clicked = visible;
      this.showClose = visible;
    },
  },
};
</script>
<style scoped lang="less">
.common-input /deep/ .ant-input {
  font-size: 14px;
}
.pop-cascader /deep/ .ant-popover-arrow {
  display:none !important;
}
.pop-cascader /deep/ .ant-popover-arrow {
  display:none !important;
}
</style>
<style lang="less">
.pop-cascader .ant-popover-arrow {
  display:none !important;
}
.pop-cascader .ant-popover-inner-content {
  padding: 0px !important;
}
</style>
